<template>
  <el-dialog :title="type==1?'证据清单':'修改属性'" :visible.sync="dialogVer" center :width="type==1?'780px':'480px'" :before-close="handleClose">
    <div class="dialog-box" v-show="type == 1||type==3">
      <ul
        class="dia-ul"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <li class="item" v-for="(item, index) in dataList" :key="index">
          <p class="txt">{{item.evidence}}</p>
          <p class="href">{{item.url}}</p>
        </li>
      </ul>
      <no-data :length="dataList.length" :loading="loading"></no-data>
      <p class="more" v-show="dataList.length>=10" @click="handlePageNum">
        <span> 查看更多 <i class="jt el-icon-d-arrow-right"></i> </span>
      </p>
    </div>
    <div class="dialog-box" v-show="type == 2">
      <el-form
          ref="ruleForm"
          :rules="rules"
          :model="ruleForm"
          label-width="120px"
          label-position="right"
        >
          <el-form-item label="属性/关系：" prop="name">
            <el-input v-model="ruleForm.name" readonly=""></el-input>
          </el-form-item>
          <el-form-item label="值：" prop="value">
            <el-input v-model="ruleForm.value"></el-input>
          </el-form-item>
          <el-form-item label="来源网站：" prop="url">
            <el-input v-model="ruleForm.url"></el-input>
          </el-form-item>
          <el-form-item label="证据：" prop="evidence">
            <el-input v-model="ruleForm.evidence"></el-input>
          </el-form-item>
        </el-form>
        <div class="btn-box">
          <el-button type="primary" @click="handleChangeAttr" class="save">确定</el-button>
          <el-button class="close" @click="handleClose">取消</el-button>
        </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    type:{
      type: Number,
      default: 1,
    },
    dataList: {
      type: Array,
      default() {
        return [];
      },
    },
    itemData: {
      type: Object,
      default() {
        return {};
      },
    },
    dialogVer: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  watch:{
    itemData(nVal){
      this.ruleForm = Object.assign(this.ruleForm,nVal)
    }
  },
  data() {
    return {
      ruleForm: {
        name: "",
        value: "",
        url:"",
        evidence:""
      },
      rules: {
        name: [
          { required: true, message: "名称不能为空", trigger: "blur" },
        ],
        value: [
          { required: true, message: "网关地址不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created(){
    console.log(this.itemData)
  },
  methods:{
    handlePageNum(){
      this.$emit('handlePageNum',this.type)
    },
    handleClose(){
      // this.dialogVer = false
       this.$emit('handleClose',false)
    },
    handleChangeAttr(){
      // this.dialogVer = false
      this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.$emit('handleChangeAttr',{newVal:{...this.ruleForm},oldVal:this.itemData})
          } else {
            console.log('参数错误，请重新填写!!');
            return false;
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-box{
   .dia-ul {
     min-height:50px;
     max-height:600px;
     overflow-y: auto;
     .item {
       display:block;
       .txt{
         font-size:14px;
         color:#B8BECC;
         line-height:22px;
         margin-bottom:10px;
       }
       .href{
         font-size:14px;
         color:#737780;
         line-height:22px;
       }
     }
   }
   .btn-box{
     text-align:center;
   }
}

</style>
